<template>
  <div id="app">
    <transition name="fade">
      <nav v-if="show">
        <span
          class="routes-container"
          v-for="(route, index) in routes"
          :key="index"
        >
          <router-link :to="route.path">{{ route.meta.title }}</router-link>
        </span>
        <!-- <router-link to="/about">About</router-link> -->
      </nav>
    </transition>
    <div class="line" v-on:click="show = !show"></div>
    <router-view />
  </div>
</template>

<script>
import { routes } from "./router/index";
export default {
  data() {
    return {
      show: true,
      routes,
    };
  },

  mounted() {
    if (this.$route.name === "home") {
      this.show = false;
    }
  },
};

// console.log(routes);
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

.routes-container {
  margin: 0 10px;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  color: #2c3e50;
}

nav {
  /* padding-top: 10px; */
  line-height: 30px;
  text-align: center;
  border-bottom: 1px solid #dcdfe6;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
.line {
  height: 4px;
  margin: 0 10px;
  cursor: pointer;
}

.line:hover::after {
  visibility: visible;
}

.line::after {
  display: block;
  content: "▼";
  position: relative;
  top: -5px;
  text-align: center;
  visibility: hidden;
  opacity: 0.5;
}
</style>
